<template>
  <div>
    <div class="vip-wrap">
      <div class="top-notice">پۈتۈن مەزمۇن ئالىي ئەزەلارغا ھەقسىز</div>
      <div class="price-wrap">
        <div
          class="item"
          :class="{ active: index == activeId }"
          @click="changeBg(index)"
          v-for="(item, index) in priceList"
          :key="index"
        >
          <span>{{ item.price }} يۈەن</span>
          <span>ۋاقتى: {{ item.time }} كۈن</span>
        </div>
        <!-- <div class="item" :class="[intergalBtn?'active':'']">
                    <span>50 جۇغلانما</span>
                    <span>1 كۈن</span>
        </div>-->
        <div style="width:30%;"></div>
        <div style="width:30%;"></div>
      </div>
      <div class="btn" v-if="currGood" @click="orderVip">ئېچىش</div>
      <div class="btn" v-if="intergalBtn">ئىلىتىماس قىلىش</div>
      <div class="tip">
        جۇغلانمىغا ئېرىشىش ئۇسۇلى: كۈندە يوقلامغا قاتناشسىڭىز 3 جۇغلانمىغا
        ئېرىشىسىز ، كىنونى دوستىڭىزغا ھەمبەھىرلىسىڭىز 1 جۇغلانمىغا ئېرىشەلەيسىز.
        <br />ئەگەر ئالىي ئەزالىق ئېچىشتا مەسىلىگە يولۇقسىڭىز بىز بىلەن
        ئالاقىلىشىڭ.
      </div>
    </div>
  </div>
</template>

<script>
import { $orderNumber, shareFrend, shareMoments } from "@/utils";
import { Toast, Dialog } from "vant";
export default {
  beforeMount() {},
  mounted() {
    shareFrend(this);
    shareMoments(this);
  },
  data() {
    return {
      activeId: -1,
      priceList: [
          { price: 2, time: 1 },
          { price: 5, time: 7 },
          { price: 10, time: 30 },
          { price: 27, time: 90 },
          { price: 49, time: 180 },
          { price: 98, time: 365 }
      ],
      currGood: null,
      intergalBtn: false,
      payErrTime:0
    };
  },
  methods: {
    changeBg(index) {
      if (this.intergalBtn) {
        this.intergalBtn = false;
      }
      if (this.activeId == index) {
        this.activeId = -1;
        this.currGood = null;
      } else {
        this.activeId = index;
        this.currGood = this.priceList[index];
      }
    },
    orderVip() {
      let orderId = $orderNumber(),
        payAmount = Math.round(this.currGood.price * 100);
      let opt = {
        orderId,
        openId: this.$store.state.userInfo.openid,
        payAmount,
        uid: this.$store.state.userInfo.uid
      };
      this.$http
        .post("/getPaymentInfo", {
          payInfo: this.$encrypt(JSON.stringify(opt))
        })
        .then(res => {
          let info = JSON.parse(this.$decrypt(res));
          let { nonceStr, paySign, signType, timeStamp } = info;
          let self = this;

          wx.ready(function() {
            wx.chooseWXPay({
              timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr, // 支付签名随机串，不长于 32 位
              // package:`prepay_id=${info.package}`,// 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              package: info.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign, // 支付签名
              success: function(payRes) {
                // 支付成功后的回调函数
                let setOption = self.$encrypt(
                  JSON.stringify({
                    ...opt,
                    payInfo: JSON.stringify(info)
                  })
                );
                self.handlePayResult(setOption);
              },
              cancel: function() {
                Toast({ message: "ئەمەلدىن قالدۇرۇلدى", duration: 1000 });
              },
              fail: function() {
                Toast({ message: "مەغلۇپ بولدى", duration: 1000 });
              }
            });
          });
        });
    },
    handlePayResult(setOption) {
      this.$http
        .post("/setVip", { payInfo: setOption })
        .then(payResult => {
                Dialog.confirm({
                  title: "ئەسكەرتىش",
                  message:
                    "مۇبارەك بولسۇن ، ئالى ئەزالىق مۇۋەپپەقىيەتلىك ئېچىلدى ، ئالىي ئەزا بېتىگە كىرەمسىز ؟",
                  confirmButtonText: "ھەئە",
                  cancelButtonText: "ياق"
                })
                  .then(_ => {
                    this.$router.push("/user");
                  })
                  .catch(_ => {});
            })
        .catch(err => {
          if (this.payErrTime < 5){
            this.handlePayResult(setOption);
            this.payErrTime++;
          }
          else {
            Toast({
              message: "مەغلۇپ بولدى ، بىز بىلەن ئالاقىلىشىڭ",
              duration: 1500
            });
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.vip-wrap {
  display: block;
  border: 1px solid transparent;
  font-size: 28px;
  .top-notice {
    display: block;
    color: #666;
    text-align: center;
    margin-top: 24px;
  }
  .price-wrap {
    width: 98%;
    margin: 20px auto 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .item {
      border: 2px solid #3dabe8;
      border-radius: 15px;
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 135px;
      margin-bottom: 20px;
      color: #3dabe8;
      direction: rtl;
      font-size: 25px;
      :first-child {
        margin: 10px 0;
      }
    }
    .active {
      background-color: #3dabe8;
      color: #ffffff;
    }
  }
  .btn {
    width: 95%;
    height: 80px;
    background: #0f97ff;
    border-radius: 44px;
    margin: 0 auto;
    line-height: 80px;
    text-align: center;
    color: white;
    font-size: 35px;
    margin-top: 19px;
    opacity: 0.9;
  }
}
.tip {
  direction: rtl;
  text-align: right;
  text-indent: 1em;
  padding: 10px;
  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.15);
  width: 92%;
  margin: 0 auto;
  border-radius: 30px;
  border: 2px solid transparent;
  color: #999;
  margin-top: 30px;
}
</style>
